﻿<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <script type="text/javascript">
      <![CDATA[
      var selected = null;
      var isMultiple = false;
      document.onkeydown = checkKeycode;
      document.onkeyup = unCheckKeycode;
      
      function checkKeycode(e)
      { 
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        if(keycode == 17)
        {
          keyDown();
        }
      }
      
      function unCheckKeycode(e)
      {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        if(keycode == 17)
        {
          keyUp();
        }
      }
      
      function clearSelection()
      {
        var elements = document.getElementsByTagName('span');
        var selectedNewServices = document.getElementById('selectedNewServices').value.split(';');
        for(var i = 0; i < elements.length; i++)
        {
          for(var j = 0; j < selectedNewServices.length; j++)
          {
            if(selectedNewServices[j] == elements[i].getAttribute('serviceName') + ':' + elements[i].getAttribute('serviceDirection'))
            {
              elements[i].style.textDecoration = 'none';
              break;
            }
          }
        }
        
        document.getElementById('selectedNewServices').value = '';
      }
      
      function unselectIfSelected(elt)
      {
        var selectedNewServices = document.getElementById('selectedNewServices').value.split(';');
        for(var j = 0; j < selectedNewServices.length; j++)
        {
          if(selectedNewServices[j] == elt.getAttribute('serviceName') + ':' + elt.getAttribute('serviceDirection'))
          {
            elt.style.textDecoration = 'none';
            selectedNewServices.splice(j, 1);
            document.getElementById('selectedNewServices').value = selectedNewServices.join(';');
        
            return true;
          }
        }
        return false;
      }

      function keyDown()
      {
        isMultiple = true;
      }

      function keyUp()
      {
        isMultiple = false;
      }

      function selectService(arg)
      {
        unselectService();
        if(arg != '[object]') arg = document.getElementById(arg);

        arg.style.textDecoration = 'underline';
        document.getElementById('selectedService').value = arg.getAttribute('serviceName');
        selected = arg;
      }

      function unselectService()
      {
        if(selected && selected == '[object]')
        {
          selected.style.textDecoration = 'none';
          selected = null;
        }
        document.getElementById('selectedService').value = '';
      }

      function addNewService(element)
      {
        if(!isMultiple) clearSelection();
        element.style.textDecoration = 'underline';
        document.getElementById('selectedNewServices').value += element.getAttribute('serviceName') + ':' + element.getAttribute('serviceDirection') + ';';
      }
      
      function loopSelected()
      {
        var selectedNewServices = document.getElementById('selectedNewServices');
        var selectedArray = new Array();
        var selObj = document.getElementById('newServices');
        
        count = 0;
        for (var i = 0; i < selObj.options.length; i++)
        {
          if (selObj.options[i].selected)
          {
            selectedArray[count] = selObj.options[i].value;
            count++;
          }
        }
        
        selectedNewServices.value = selectedArray.join(';');
      }
	  
  	  function deleteService(serviceName)
	  {
		if (confirm('Confirmez la suppression de ce service et de ses utilisateurs du trombinoscope ?'))
		{
			document.getElementById('selectedButton').value = serviceName;
			document.forms[0].submit();
		}
	  }

      ]]>
    </script>
    <input type="hidden" name="selectedButton" value="" />
    <input type="hidden" name="selectedService" value="" />
    <input type="hidden" name="selectedNewServices" value="" />
    <table>
      <tr>
        <td colspan="3" style="text-align:right">
          <input type="button" name="btnValidate" value=" Valider " onclick="javascript:document.getElementById('selectedButton').value = this.name;this.form.submit();" />
        </td>
      </tr>
      <tr>
        <td style="width:25%;vertical-align:top;">
          <table style="width:100%;vertical-align:top;">
            <tr>
              <td style="width:100%;vertical-align:top;padding-bottom:20px;">
                <table style="width:100%;vertical-align:top;">
                  <tr class="ms-WPHeader">
                    <td id="WebPartTitleWPQ3" title="Trombinoscope" style="WIDTH: 100%">
                      <h3 class="ms-standardheader ms-WPTitle">
                        <nobr>
                          <span style="font-size:10pt">Services</span>
                          <span id="WebPartCaptionWPQ3"></span>
                        </nobr>
                      </h3>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td class="leftNavBG" style="width:100%;vertical-align:top;">
                <table class="leftNav" cellSpacing="0" cellPadding="0" border="0" style="width:100%;border:0px;">
                  <tr>
                    <td>
                      <table class="leftNavItem" cellSpacing="0" cellPadding="0" style="width:100%;" border="0">
                        <tr>
                          <td style="WIDTH: 100%; WHITE-SPACE: nowrap">
                            <span class="leftNavItem" style="FONT-SIZE: 1em; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none;padding-left:5px;">Les tribus VP</span>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <xsl:apply-templates select="/Services/Service" />
                </table>
                <input type="button" name="btnDelete" value=" Supprimer le service sélectionné " onclick="javascript:deleteService(this.name);" />
              </td>
            </tr>
          </table>
        </td>
        <td style="text-align:center">
          <input type="button" name="btnUp" value=" Monter d'un rang " onclick="javascript:document.getElementById('selectedButton').value = this.name;this.form.submit();" />
          <br/>
          <input type="button" name="btnLeft" value=" Monter d'un niveau " onclick="javascript:document.getElementById('selectedButton').value = this.name;this.form.submit();" />
          <input type="button" name="btnRight" value=" Descendre d'un niveau " onclick="javascript:document.getElementById('selectedButton').value = this.name;this.form.submit();" />
          <br/>
          <input type="button" name="btnDown" value=" Descendre d'un rang " onclick="javascript:document.getElementById('selectedButton').value = this.name;this.form.submit();" />
        </td>
        <td style="width:25%;vertical-align:top;">
          <select name="newServices" multiple="multiple" style="width:100%" size="40">
            <xsl:apply-templates select="/Services/NewService[@Name != '']">
				<xsl:sort select="@Name" order="ascending"/>
			</xsl:apply-templates>
          </select>
          <div style="width:100%;text-align:right;">
            <input type="button" name="btnAdd" value=" Ajouter le(s) service(s) sélectionné(s) à l'arborescence " onclick="javascript:document.getElementById('selectedButton').value = this.name;loopSelected();this.form.submit();" />
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="3" style="text-align:right">
          <input type="button" name="btnValidate" value=" Valider " onclick="javascript:document.getElementById('selectedButton').value = this.name;this.form.submit();" />
        </td>
      </tr>
    </table>
  </xsl:template>
  <xsl:template match="/Services/Service">
    <tr>
      <td>
        <table cellSpacing="0" cellPadding="0" width="100%" border="0">
          <tr>
            <td>
              <table class="leftsubNavItem" cellSpacing="0" cellPadding="0" width="100%" border="0">
                <tr>
                  <td class="leftsubNavItem">
                    <xsl:attribute name="style">
                      <xsl:choose>
                        <xsl:when test="position() != 1">
                          <![CDATA[width: 100%; white-space: nowrap;border-top:solid 1px #c5da8b]]>
                        </xsl:when>
                        <xsl:otherwise>
                          <![CDATA[width: 100%; white-space: nowrap]]>
                        </xsl:otherwise>
                      </xsl:choose>
                    </xsl:attribute>
                    <span class="leftsubNavItem" style="cursor:pointer;font-size: 1em; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none;text-transform: uppercase;font-weight: bold;" onclick="javascript:if(selected == this) unselectService();else selectService(this);">
                      <xsl:attribute name="serviceName">
                        <xsl:value-of select="@Name" />
                      </xsl:attribute>
                      <xsl:choose>
                        <xsl:when test="@Selected = 'True'">
                          <xsl:attribute name="id">selected</xsl:attribute>
                          <script type="text/javascript">
                            selectService('selected');
                          </script>
                        </xsl:when>
                        <xsl:otherwise>
                          <xsl:attribute name="id">
                            <xsl:value-of select="concat('service_', @Name, '_', @DirectionCssName)"/>
                          </xsl:attribute>
                        </xsl:otherwise>
                      </xsl:choose>
                      <xsl:value-of select="@Name" />
                    </span>
                  </td>
                </tr>
                <xsl:if test="count(current()/Service) > 0">
                  <tr>
                    <td class="leftsubNavItem" style="width: 100%; white-space: nowrap; padding-left:10px">
                      <xsl:apply-templates select="Service" mode="Level2" />
                    </td>
                  </tr>
                </xsl:if>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </xsl:template>
  <!--<xsl:template match="Service/Service">
    <table class="leftsubNavItem" cellSpacing="0" cellPadding="0" width="100%" border="0">
      <tr>
        <td class="leftsubNavItem" style="width: 100%; white-space: nowrap">
          <span class="leftsubNavItem" style="cursor:pointer;font-size: 1em; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none" onclick="javascript:if(selected == this) unselectService();else selectService(this);">
            <xsl:attribute name="serviceName">
              <xsl:value-of select="@Name" />
            </xsl:attribute>
            <xsl:choose>
              <xsl:when test="@Selected = 'True'">
                <xsl:attribute name="id">selected</xsl:attribute>
                <script type="text/javascript">
                  selectService('selected');
                </script>
              </xsl:when>
              <xsl:otherwise>
                <xsl:attribute name="id">
                  <xsl:value-of select="concat('service_', @Name, '_', @DirectionCssName)"/>
                </xsl:attribute>
              </xsl:otherwise>
            </xsl:choose>
            <xsl:value-of select="@Name" />
          </span>
        </td>
      </tr>
      <xsl:if test="count(current()/Service) > 0">
        <tr>
          <td class="leftsubNavItem" style="width: 100%; white-space: nowrap; padding-left:10px">
            <xsl:apply-templates select="Service" />
          </td>
        </tr>
      </xsl:if>
    </table>
  </xsl:template>-->
  <xsl:template match="Service" mode="Level2">
    <table class="leftsubNavItem" cellSpacing="0" cellPadding="0" width="100%" border="0">
      <tr>
        <td class="leftsubNavItem" style="width: 100%; white-space: nowrap">
          <span class="leftsubNavItem" style="cursor:pointer;font-size: 1em; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none;font-weight: bold;" onclick="javascript:if(selected == this) unselectService();else selectService(this);">
            <xsl:attribute name="serviceName">
              <xsl:value-of select="@Name" />
            </xsl:attribute>
            <xsl:choose>
              <xsl:when test="@Selected = 'True'">
                <xsl:attribute name="id">selected</xsl:attribute>
                <script type="text/javascript">
                  selectService('selected');
                </script>
              </xsl:when>
              <xsl:otherwise>
                <xsl:attribute name="id">
                  <xsl:value-of select="concat('service_', @Name, '_', @DirectionCssName)"/>
                </xsl:attribute>
              </xsl:otherwise>
            </xsl:choose>
            <xsl:value-of select="@Name" />
          </span>
        </td>
      </tr>
      <xsl:if test="count(current()/Service) > 0">
        <tr>
          <td class="leftsubNavItem" style="width: 100%; white-space: nowrap; padding-left:10px">
            <xsl:apply-templates select="Service" mode="Level3" />
          </td>
        </tr>
      </xsl:if>
    </table>
  </xsl:template>
  <xsl:template match="Service" mode="Level3">
    <table class="leftsubNavItem" cellSpacing="0" cellPadding="0" width="100%" border="0">
      <tr>
        <td class="leftsubNavItem" style="width: 100%; white-space: nowrap">
          <span class="leftsubNavItem" style="cursor:pointer;font-size: 1em; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none" onclick="javascript:if(selected == this) unselectService();else selectService(this);">
            <xsl:attribute name="serviceName">
              <xsl:value-of select="@Name" />
            </xsl:attribute>
            <xsl:choose>
              <xsl:when test="@Selected = 'True'">
                <xsl:attribute name="id">selected</xsl:attribute>
                <script type="text/javascript">
                  selectService('selected');
                </script>
              </xsl:when>
              <xsl:otherwise>
                <xsl:attribute name="id">
                  <xsl:value-of select="concat('service_', @Name, '_', @DirectionCssName)"/>
                </xsl:attribute>
              </xsl:otherwise>
            </xsl:choose>
            <xsl:value-of select="@Name" />
          </span>
        </td>
      </tr>
      <xsl:if test="count(current()/Service) > 0">
        <tr>
          <td class="leftsubNavItem" style="width: 100%; white-space: nowrap; padding-left:10px">
            <xsl:apply-templates select="Service" mode="Level3" />
          </td>
        </tr>
      </xsl:if>
    </table>
  </xsl:template>
  <xsl:template match="/Services/NewService">
    <option>
      <xsl:attribute name="label">
        <xsl:value-of select="@Name" />
      </xsl:attribute>
      <xsl:attribute name="value">
        <xsl:value-of select="concat(@Name, '_', @DirectionCssName)" />
      </xsl:attribute>
      <xsl:value-of select="@Name" />
    </option>
  </xsl:template>
</xsl:stylesheet>